import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:nyh_motorcade_app/styles/colors.dart';
import 'package:nyh_motorcade_app/widgets/custom_app_bar.dart';
import 'package:nyh_motorcade_app/widgets/custom_text_field.dart';
import 'package:nyh_motorcade_app/widgets/precision_limit_formatter.dart';
import 'package:nyh_motorcade_app/widgets/text_button_with_icon.dart';
import 'quota_controller.dart';

class QuotaPage extends StatelessWidget {
  final controller = Get.put(QuotaController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colours.color_background,
      appBar: CustomAppBar(context: context, title: "限制额度"),
      body: GetBuilder<QuotaController>(
        builder: (controller) {
          return Column(
            children: [
              Expanded(
                child: Column(
                  children: [
                    SizedBox(
                      height: 12.w,
                    ),
                    Container(
                      color: Colours.color_white,
                      padding: EdgeInsets.only(left: 16.w, right: 16.w),
                      height: 48.w,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "调整前限额",
                            style: TextStyle(
                              color: Colours.color_text_theme,
                              fontSize: 14.sp,
                            ),
                          ),
                          Text(
                            controller.beforeQuota,
                            style: TextStyle(
                              color: Colours.color_text_theme,
                              fontSize: 14.sp,
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 12.w,
                    ),
                    Container(
                      color: Colours.color_white,
                      padding: EdgeInsets.only(left: 16.w, right: 10.w),
                      height: 48.w,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "调整后周期",
                            style: TextStyle(
                              color: Colours.color_text_theme,
                              fontSize: 14.sp,
                            ),
                          ),
                          TextButtonWithIcon(
                            onPressed: () {
                              showCycleDialog();
                            },
                            icon: Image.asset(
                              "images/ic_arrow_right_gray.png",
                              color: Colours.color_text_theme,
                            ),
                            label: Text(
                              controller.cycleName.isNotEmpty ? controller.cycleName : "请选择",
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 14.sp,
                              ),
                            ),
                            textIconPadding: 8.w,
                            iconTextAlignment: IconTextAlignment.iconRightTextLeft,
                            style: ButtonStyle(
                              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                              minimumSize: MaterialStateProperty.all(Size(0, 0)),
                              padding: MaterialStateProperty.all(EdgeInsets.all(6.w)),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Divider(
                      color: Colours.color_divider,
                      height: 1.w,
                      thickness: 1.w,
                    ),
                    Container(
                      color: Colours.color_white,
                      padding: EdgeInsets.only(left: 16.w, right: 10.w),
                      height: 48.w,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "调整后单位",
                            style: TextStyle(
                              color: Colours.color_text_theme,
                              fontSize: 14.sp,
                            ),
                          ),
                          TextButtonWithIcon(
                            onPressed: () {
                              showUnitDialog();
                            },
                            icon: Image.asset(
                              "images/ic_arrow_right_gray.png",
                              color: Colours.color_text_theme,
                            ),
                            label: Text(
                              controller.unitName.isNotEmpty ? controller.unitName : "请选择",
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 14.sp,
                              ),
                            ),
                            textIconPadding: 8.w,
                            iconTextAlignment: IconTextAlignment.iconRightTextLeft,
                            style: ButtonStyle(
                              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                              minimumSize: MaterialStateProperty.all(Size(0, 0)),
                              padding: MaterialStateProperty.all(EdgeInsets.all(6.w)),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Divider(
                      color: Colours.color_divider,
                      height: 1.w,
                      thickness: 1.w,
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      color: Colours.color_white,
                      height: 48.w,
                      child: Row(
                        children: [
                          Text(
                            "调整后限额",
                            style: TextStyle(
                              color: Colours.color_text_theme,
                              fontSize: 14.sp,
                            ),
                          ),
                          SizedBox(
                            width: 16.w,
                          ),
                          Expanded(
                            child: CustomTextField(
                              "请输入额度",
                              controller: controller.quotaController,
                              focusNode: controller.quotaFocus,
                              hintStyle: TextStyle(color: Colours.color_cfcfd5, fontSize: 14.sp),
                              textStyle: TextStyle(color: Colours.color_text_theme, fontSize: 14.sp),
                              textAlign: TextAlign.right,
                              contentPadding: EdgeInsets.symmetric(vertical: 15),
                              keyboardType: TextInputType.numberWithOptions(decimal: true),
                              inputFormatters: [
                                LengthLimitingTextInputFormatter(10),
                                FilteringTextInputFormatter.allow(RegExp("[0-9.]")),
                                PrecisionLimitFormatter(2),
                              ],
                              onChanged: (value) {
                                controller.setQuota(value);
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(vertical: 8.w, horizontal: 16.w),
                color: Colours.color_white,
                child: TextButton(
                  onPressed: () {
                    controller.onConfirm();
                  },
                  child: Text(
                    "确定",
                    style: TextStyle(
                      color: Colours.color_white,
                      fontSize: 16.sp,
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.resolveWith((states) {
                      return controller.isComplete() ? Colours.color_theme : Colours.color_ffd599;
                    }),
                    overlayColor: MaterialStateProperty.resolveWith((states) {
                      return controller.isComplete() ? Colours.color_theme_deep : Colours.color_ffd599;
                    }),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(28.w),
                      ),
                    ),
                    minimumSize: MaterialStateProperty.all(Size(double.infinity, 48.w)),
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  void showCycleDialog() {
    controller.quotaFocus.unfocus();
    showModalBottomSheet(
      context: Get.context!,
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.w),
          topRight: Radius.circular(10.w),
        ),
      ),
      builder: (c) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            MediaQuery.removePadding(
              removeTop: true,
              removeBottom: true,
              context: Get.context!,
              child: ListView.separated(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: controller.cycleList.length,
                itemBuilder: (context, index) {
                  return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(index == 0 ? 10.w : 0),
                        topRight: Radius.circular(index == 0 ? 10.w : 0),
                      ),
                    ),
                    height: 48.w,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(index == 0 ? 10.w : 0),
                        topRight: Radius.circular(index == 0 ? 10.w : 0),
                      ),
                      child: Material(
                        color: Colours.color_transparent,
                        child: InkWell(
                          onTap: () {
                            Navigator.pop(c);
                            controller.changeCycleType(index);
                          },
                          child: Center(
                            child: Text(
                              controller.cycleList[index].name,
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 16.sp,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(
                    color: Colours.color_background,
                    height: 1.w,
                    thickness: 1.w,
                  );
                },
              ),
            ),
            Container(
              height: 8.w,
              color: Colours.color_background,
            ),
            Container(
              height: 48.w,
              child: Material(
                child: InkWell(
                  onTap: () {
                    Navigator.pop(c);
                  },
                  child: Center(
                    child: Text(
                      "取消",
                      style: TextStyle(
                        color: Colours.color_9fa0ab,
                        fontSize: 16.sp,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      },
    );
  }

  void showUnitDialog() {
    controller.quotaFocus.unfocus();
    showModalBottomSheet(
      context: Get.context!,
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.w),
          topRight: Radius.circular(10.w),
        ),
      ),
      builder: (c) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            MediaQuery.removePadding(
              removeTop: true,
              removeBottom: true,
              context: Get.context!,
              child: ListView.separated(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: controller.unitList.length,
                itemBuilder: (context, index) {
                  return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(index == 0 ? 10.w : 0),
                        topRight: Radius.circular(index == 0 ? 10.w : 0),
                      ),
                    ),
                    height: 48.w,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(index == 0 ? 10.w : 0),
                        topRight: Radius.circular(index == 0 ? 10.w : 0),
                      ),
                      child: Material(
                        color: Colours.color_transparent,
                        child: InkWell(
                          onTap: () {
                            Navigator.pop(c);
                            controller.changeUnitType(index);
                          },
                          child: Center(
                            child: Text(
                              controller.unitList[index].name,
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 16.sp,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(
                    color: Colours.color_background,
                    height: 1.w,
                    thickness: 1.w,
                  );
                },
              ),
            ),
            Container(
              height: 8.w,
              color: Colours.color_background,
            ),
            Container(
              height: 48.w,
              child: Material(
                child: InkWell(
                  onTap: () {
                    Navigator.pop(c);
                  },
                  child: Center(
                    child: Text(
                      "取消",
                      style: TextStyle(
                        color: Colours.color_9fa0ab,
                        fontSize: 16.sp,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}
